<template>
    <!-- 面包屑导航 -->
    <a-breadcrumb>
        <a-breadcrumb-item>admin</a-breadcrumb-item>
        <a-breadcrumb-item>视频采集</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- style="justify-content: center;" -->
    <a-row style="margin-top: 10px;">
        <a-card style="width: 98%;">
            <div style="margin: 10px 25px;">
                <a-form-item label="url地址:">
                    <a-input v-model="collectForm.url" placeholder="输入影视详情页url" />
                </a-form-item>
                <a-form-item label="采集分类">
                    <a-select v-model="collectForm.cate" :style="{width:'120px'}" placeholder="选择分类">
                        <a-option :value="cate.id" v-for="cate in cateList">{{cate.name}}</a-option>
                    </a-select>
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" size="small" @click="addUrl">添加到列表</a-button>
                </a-form-item>
            </div>
        </a-card>


        <a-card style="width: 98%;margin-top: 5px;">
            <div style="margin: 10px 25px;">
                <a-list :gridProps="{ gutter: 0, span: 8 }" :bordered="false">
                    <a-list-item>
                        <a-list size="small">
                            <template #header>
                                <div class="wait-list-title">
                                    <span>电视剧待采集列表</span>
                                    <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                                        @click="startTeleplayCollect" :disabled="tcbIsDisabled">开始</a-button>
                                </div>
                            </template>
                            <a-list-item v-for="li in teleplayWaitCollectList">
                                {{li}}
                                <template #actions>
                                    <icon-delete @click="deleteTeleplayListItem(li)" />
                                </template>
                            </a-list-item>
                        </a-list>
                    </a-list-item>
                    <a-list-item>
                        <a-list size="small">
                            <template #header>
                                <div class="wait-list-title">
                                    <span>电影待采集列表</span>
                                    <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                                        @click="startMovieCollect" :disabled="mcbIsDisabled">开始</a-button>
                                </div>
                            </template>
                            <a-list-item v-for="li in movieWaitCollectList">
                                {{li}}
                                <template #actions>
                                    <icon-delete @click="deleteMovieListItem(li)" />
                                </template>
                            </a-list-item>
                        </a-list>
                    </a-list-item>
                    <a-list-item>
                        <a-list size="small">
                            <template #header>
                                <div class="wait-list-title">
                                    <span>动漫待采集列表</span>
                                    <a-button type="primary" size="small" status="success" style="margin-left: 15px;"
                                        @click="startAnimationCollect" :disabled="acbIsDisabled">开始</a-button>
                                </div>
                            </template>
                            <a-list-item v-for="li in animationWaitCollectList" ellipsis>
                                {{li}}
                                <template #actions>
                                    <icon-delete @click="deleteAnimationListItem(li)" />
                                </template>
                            </a-list-item>
                        </a-list>
                    </a-list-item>
                </a-list>
            </div>
        </a-card>
    </a-row>
</template>


<script>
    import { ref } from 'vue';
    import { Message } from '@arco-design/web-vue';
    import { doCollect } from '../../api/collect';

    export default {
        setup() {
            const collectForm = ref({
                url: '',
                cate: '',
            });

            const cateList = ref([
                { id: '电视剧', name: '电视剧' },
                { id: '电影', name: '电影' },
                { id: '动漫', name: '动漫' },
            ]);

            const tcbIsDisabled = ref(false);
            const mcbIsDisabled = ref(false);
            const acbIsDisabled = ref(false);

            const teleplayWaitCollectList = ref([]);
            const movieWaitCollectList = ref([]);
            const animationWaitCollectList = ref([]);

            // 添加链接到待采集列表
            const addUrl = () => {
                if (collectForm.value.url == '') {
                    Message.warning('请输入待视频地址');
                    return;
                }
                if (collectForm.value.cate == '') {
                    Message.warning('请选择采集分类');
                    return;
                }
                switch (collectForm.value.cate) {
                    case "电视剧":
                        teleplayWaitCollectList.value.push(collectForm.value.url);
                        break;
                    case "电影":
                        movieWaitCollectList.value.push(collectForm.value.url);
                        break;
                    case "动漫":
                        animationWaitCollectList.value.push(collectForm.value.url);
                        break;

                    default:
                        break;
                }
                collectForm.value.url = '';
                collectForm.value.cate = '';
            }

            const deleteTeleplayListItem = (li) => {
                teleplayWaitCollectList.value.splice(teleplayWaitCollectList.value.indexOf(li), 1);
            };
            const deleteMovieListItem = (li) => {
                movieWaitCollectList.value.splice(movieWaitCollectList.value.indexOf(li), 1);
            };
            const deleteAnimationListItem = (li) => {
                animationWaitCollectList.value.splice(animationWaitCollectList.value.indexOf(li), 1);
            };


            // 开始电视剧采集
            const startTeleplayCollect = () => {
                if (teleplayWaitCollectList.value.length == 0) {
                    return;
                }
                tcbIsDisabled.value = true;
                let data = {
                    cate: "电视剧",
                    urls: teleplayWaitCollectList.value,
                };
                doCollect(data).then(res => {
                    if (res.code != 200) {
                        Message.error("出现错误");
                        tcbIsDisabled.value = false;
                        return;
                    }
                    teleplayWaitCollectList.value = [];
                    tcbIsDisabled.value = false;
                    Message.success("采集完毕");
                }).catch(err => console.log(err));
            }

            // 开始电影采集
            const startMovieCollect = () => {
                if (movieWaitCollectList.value.length == 0) {
                    return;
                }
                mcbIsDisabled.value = true;
                let data = {
                    cate: "电影",
                    urls: movieWaitCollectList.value,
                };
                doCollect(data).then(res => {
                    if (res.code != 200) {
                        Message.error("出现错误");
                        mcbIsDisabled.value = false;
                        return;
                    }
                    movieWaitCollectList.value = [];
                    mcbIsDisabled.value = false;
                    Message.success("采集完毕");
                }).catch(err => console.log(err));
            }

            // 开始动漫采集
            const startAnimationCollect = () => {
                if (animationWaitCollectList.value.length == 0) {
                    return;
                }
                acbIsDisabled.value = true;
                let data = {
                    cate: "动漫",
                    urls: animationWaitCollectList.value,
                };
                doCollect(data).then(res => {
                    if (res.code != 200) {
                        Message.error("出现错误");
                        acbIsDisabled.value = false;
                        return;
                    }
                    animationWaitCollectList.value = [];
                    acbIsDisabled.value = false;
                    Message.success("采集完毕");
                }).catch(err => console.log(err));
            }


            return {
                collectForm,
                cateList,
                tcbIsDisabled,
                mcbIsDisabled,
                acbIsDisabled,
                teleplayWaitCollectList,
                movieWaitCollectList,
                animationWaitCollectList,

                addUrl,
                startTeleplayCollect,
                startMovieCollect,
                startAnimationCollect,

                deleteTeleplayListItem,
                deleteMovieListItem,
                deleteAnimationListItem,
            }

        }
    }

</script>


<style scoped>
    :deep(.arco-list-item .arco-list-item-action) {
        margin-top: unset !important;
    }

    .wait-list-title {
        margin: 10px;
        display: flex;
        justify-content: space-between;
    }
</style>